<template>
  <div v-if="visible" class="modal-overlay" style="z-index: 9999;">
    <div class="modal"> 
	<dv-border-box-13 style="height: 800px;background-color: black; ">
		<el-icon style="position: absolute;right: 20px; top: 20px;color: #add8e6;"  @click="closeModal"><CircleCloseFilled /></el-icon>
		<div class="scroll_rank">
			<div class="rank_box">
				
				<dv-scroll-ranking-board-table  class="dv-scr-rank-board mt-1"
					:config="ranking" />
				
				<!-- <dv-scroll-board class="dv-scr-board mt-1"
					:config="ranking" /> -->
			</div>
		</div>
	</dv-border-box-13> 
    </div>
  </div>
</template>

<script>


export default {
	data() {
		return {
			ranking: {
				header: ['联网状态', '设备SN码', '地理位置','当日自动清理次数','当日抚平次数','当日手动清理次数','驱赶猫咪(开/关)',
					'猫砂剩余量',
					'集便仓容量',
					'消毒水状态',
					'舱内温度',
					'使用模式',
					'猫砂种类',
					'舱门模式',
					'自动清理（开/关）',
					'定时清理（开/关）',
					'灯光状态（开/关）',
					'灯光颜色'
				],
				
				carousel: 'single',
				unit: '台'
			},
				pageIndex: 1,
				device_data:[],
			}
		},
		name: 'component',
		props: {
			visible: {
				type: Boolean,
				required: true
		},
	title: {
		type: String,
		default: '弹窗标题'  
	},
	message: {
		type: String,
		default: '这是弹窗的内容。'
	},
	
},
  
  mounted: function() {
	console.log(this.$el);
	this.user_login = this.getStorageSync('user') == '' ? false : true
	this.userInfo = this.getStorageSync('user')
	this.getDeviceProperty();
  },
  created:function(){
	

  },
  methods: {
	getStorageSync(key) {
		// 从 localStorage 中获取指定 key 的值
		return localStorage.getItem(key) || 'No data found';
	},  
    closeModal() {
      this.$emit('close');
    },
	getDeviceProperty(){
		this.to_socket();
	},
	
	
	to_socket() {
		if (this.user_login) {
			
			if (this.$ws.socketTask == null) {
				this.$ws.init(this.userInfo.id);
			}
			
			this.$ws.socketTask.onmessage = function(res){
				let data = JSON.parse(res.data)
				console.log('服务端返回信息')
				console.log(data)
				
				if (data.iotId == this.id) {
					let device_prop = this.deviceInfo.prop
					if (data.type == 'pro' && data.iotId == this.deviceInfo.iotId) {
						//无程序执行设置进度为0
						if (device_prop.Prform_State == 0 && this.percentage > 0) {
							this.percentage = 0;
						}
						//当前集便仓弹出状态 收到安装成功上报Prform_State=0，提示用户已安装
						if (device_prop.Prform_State == 17 && data.title == 'Prform_State' && data.value ==
							0) {
							// uni.showToast({
							// 	title: '集便仓已安装',
							// 	icon: 'none'
							// })
						}
						device_prop[data.title] = data.value;
						this.deviceInfo.prop = device_prop
						
						this.state_str = this.getPrform_StateStr(this.deviceInfo.prop
							.Prform_State) // 设置提示文字
						console.log(this.state_str)
						console.log('获取wss位置')
						this.exe_loding = this.state_str!='' ? true :false; //当前有程序执行，弹出提示
						this.format_Sterilize()
						if (this.deviceInfo.prop.Prform_State == 0) {
							this.percentage = 100;
						}
					}
					if (data.title == 'Sterilize' && data.type == 'process') {
						console.log(this.Sterilize_total)
						this.percentage = Math.floor(100 - data.value / this.Sterilize_total * 100)
					}
				}
	
			}
		}
	},
	
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.modal {
  
  padding: 20px;
  border-radius: 5px;

  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>